<template>
  <div
    :class="wrapClasses">
    <div :class="outerClasses">
      <div :class="innerClasses">
        <div
          :class="bgClasses"
          :style="bgStyle">
          <div
            :class="innerCless"
            v-if="textInside">
            <slot name="progress-content"></slot>
            {{ percent }}%
          </div>
        </div>
        <slot name="button-close"></slot>
        <div
          :class="successBgClasses"
          :style="successBgStyle"></div>
      </div>
    </div>
    <span
      v-if="!isSmallType && !hideInfo && !textInside"
      :class="textClasses">
      <slot>
        <span
          v-if="isStatus"
          :class="textInnerClasses">
          <Icon :type="statusInfo.type"></Icon>
        </span>
        <span
          v-if="isStatus"
          :class="statusTextClass">
          {{ statusInfo.text }}
        </span>
        <span
          v-if="!isStatus"
          :class="textInnerClasses">
          {{ percent }}%
        </span>
      </slot>
    </span>
  </div>

</template>
<script setup>
import { ref, defineProps,toRefs,watch,computed, getCurrentInstance, defineExpose } from 'vue'
import Icon from '../icon';
import { oneOf } from '../../utils/assist';

const prefixCls = ref('haloe-progress');
const progressPrefixCls = ref('haloe-upload-progress');
// const textClasses = `${prefixCls}-text`
// const textInnerClasses = `${prefixCls}-text-inner`
// const outerClasses = `${prefixCls}-outer`
// const innerClasses = `${prefixCls}-inner`
// const bgClasses = `${prefixCls}-bg`
// const successBgClasses = `${prefixCls}-success-bg`
// const statusTextClass = `${prefixCls}-status-text`
const emits = defineEmits(['on-status-change'])
const props = defineProps({
  type: {
    validator(value) {
      return oneOf(value, ['small', 'default']);
    },
    default: 'default'
  },
  percent: {
    type: Number,
    default: 0,
    validator: (val) => val >= 0 && val <= 100
  },
  successPercent: {
    type: Number,
    default: 0,
    validator: (val) => val >= 0 && val <= 100
  },
  status: {
    validator (value) {
      return oneOf(value, ['normal', 'active', 'wrong', 'success']);
    },
    default: 'normal'
  },
  hideInfo: {
    type: Boolean,
    default: false
  },
  strokeWidth: {
    type: Number,
    default: 10
  },
  vertical: {
    type: Boolean,
    default: false
  },
  strokeColor: {
    type: [String, Array]
  },
  textInside: {
    type: Boolean,
    default: false
  },
  showStatusTips: {
    type: Boolean,
    default: false
  },
  /*
    upload 定义progress
  */ 
  uploadProgress:{
    type:Boolean,
    default:false,
  }
})

const innerClasses=computed(()=>{
  return props.uploadProgress?`${progressPrefixCls.value}-inner`:`${prefixCls.value}-inner`
})
const bgClasses=computed(()=>{
  return props.uploadProgress?`${progressPrefixCls.value}-bg`:`${prefixCls.value}-bg`});

const innerCless=computed(()=>{
  return props.uploadProgress? `${progressPrefixCls.value}-inner-text`:`${prefixCls.value}-inner-text`
})
const successBgClasses =computed(()=>`${prefixCls.value}-success-bg`);
const statusTextClass = computed(()=>`${prefixCls.value}-status-text`);
const outerClasses = computed(()=>`${prefixCls.value}-outer`)
const textInnerClasses = computed(()=>`${prefixCls.value}-text-inner`)
const textClasses = computed(()=>`${prefixCls.value}-text`) 
const {type, status, percent,strokeColor, vertical, successPercent, strokeWidth,hideInfo,textInside, showStatusTips} = toRefs(props)
let _status = ref(status.value)
watch(status,(value)=>{
  _status.value = value
})
watch(percent,(val, oldVal)=>{
  if (val < oldVal) {
    handleStatus(true);
  } else {
    handleStatus();
  }
})
const isSmallType = computed(() => type.value === 'small')
const isStatus = computed(() => _status.value === 'wrong' || _status.value === 'success')
const statusInfo = computed(() => {
  let info = {
    type: '',
    text: ''
  };
  switch (_status.value) {
  case 'wrong':
    info.type = 'warning-filled';
    info.text = showStatusTips.value ? '失败' : ''
    break;
  case 'success':
    info.type = 'check-circle-filled'
    info.text = showStatusTips.value ? '成功' : ''
    break;
  }
  return info;
})
const bgStyle = computed(() => {
  let stroke = type.value === 'small' ? '6px' : `${strokeWidth.value}px`
  const style =  vertical.value ? {
    height: `${percent.value}%`,
    width: stroke,
  } : {
    width: `${percent.value}%`,
    height: stroke
  };

  if (strokeColor.value) {
    if (typeof strokeColor.value === 'string') {
      style['background-color'] = strokeColor.value;
    } else {
      style['background-image'] = `linear-gradient(to right, ${strokeColor.value[0]} 0%, ${strokeColor.value[1]} 100%)`;
    }
  }
  return style;
})
const successBgStyle = computed(() => {
  return vertical.value ? {
    height: `${successPercent.value}%`,
    width: `${strokeWidth.value}px`
  } : {
    width: `${successPercent.value}%`,
    height: `${strokeWidth.value}px`
  };
})
const wrapClasses = computed(() => {
  return [
    `${prefixCls.value}`,
    `${prefixCls.value}-${_status.value}`,
    {
      [`${prefixCls.value}-show-info`]: !hideInfo.value && !textInside.value,
      [`${prefixCls.value}-vertical`]: vertical.value
    }
  ];
})
const handleStatus = (isDown) => {
  if (isDown) {
    _status.value = 'normal'
    emits('on-status-change', 'normal')
  } else {
    if (parseInt(percent.value, 10) === 100) {
      _status.value = 'success'
      emits('on-status-change', 'success')
    }
  }
}

handleStatus()
</script>
